<template>
  <div
    class="tabs"
    :class="{
      card: card,
      'space-around': spaceAround,
      'space-between': spaceBetween,
    }"
    :style="tabsStyle || {}"
  >
    <div
      v-for="tab in tabs"
      :key="tab.key"
      class="tab"
      :class="{ active: tab.key === value }"
      :style="{
        ...(tabStyle || {}),
        color: getTabColor(tab.color),
      }"
      @touchstart.prevent="updateValue(tab.key)"
      @click.stop="updateValue(tab.key)"
    >
      {{ tab.label }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true,
    },
    tabs: {
      type: Array,
      required: true,
    },
    card: {
      type: Boolean,
      default: false,
    },
    tabsStyle: {
      type: Object,
      default: null,
    },
    tabStyle: {
      type: Object,
      default: null,
    },
    spaceAround: {
      type: Boolean,
      default: false,
    },
    spaceBetween: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    updateValue(key) {
      this.$emit('update:value', key);
    },
    getTabColor(color) {
      return color || null;
    },
  },
};
</script>

<style lang="less" scoped>
.tabs {
  display: flex;
  user-select: none;
  line-height: 1;

  &:not(.card) {
    font-size: 13px;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #eee;

    &.space-around {
      justify-content: space-around;
    }
    &.space-between {
      justify-content: space-between;
    }

    .tab {
      text-align: center;
      border-bottom: 2px solid transparent;
      padding: 8px 10px;
      cursor: pointer;

      &.active {
        border-bottom: 2px solid #d14424;
      }
    }
  }

  &.card {
    height: 40px;
    font-size: 12px;
    flex-shrink: 0;

    .tab {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f9f9f9;
      border-bottom: 1px solid #eee;
      cursor: pointer;

      &.active {
        background-color: transparent;
        border-bottom-color: transparent;
      }

      & + .tab {
        border-left: 1px solid #eee;
      }
    }
  }
}
</style>
